<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <style>
      canvas {
          border: 1px solid black;
      }
  </style>
</head>
<body>
<canvas id="c11" width="100" height="100"></canvas>
<canvas id="c12" width="100" height="100"></canvas>
<canvas id="c13" width="100" height="100"></canvas>
<hr>
<canvas id="c21" width="100" height="100"></canvas>
<canvas id="c22" width="100" height="100"></canvas>
<canvas id="c23" width="100" height="100"></canvas>
<hr>
<canvas id="c31" width="100" height="100"></canvas>
<canvas id="c32" width="100" height="100"></canvas>
<canvas id="c33" width="100" height="100"></canvas>
<hr>
<canvas id="c41" width="100" height="100"></canvas>
<canvas id="c42" width="100" height="100"></canvas>
<canvas id="c43" width="100" height="100"></canvas>
<hr>
<canvas id="c51" width="100" height="100"></canvas>
<canvas id="c52" width="100" height="100"></canvas>
<canvas id="c53" width="100" height="100"></canvas>
<hr>
<canvas id="c61" width="100" height="100"></canvas>
<canvas id="c62" width="100" height="100"></canvas>
<canvas id="c63" width="100" height="100"></canvas>
<hr>
<canvas id="c71" width="100" height="100"></canvas>
<canvas id="c72" width="100" height="100"></canvas>
<canvas id="c73" width="100" height="100"></canvas>
<hr>
<canvas id="c81" width="100" height="100"></canvas>
<canvas id="c82" width="100" height="100"></canvas>
<canvas id="c83" width="100" height="100"></canvas>
<hr>
<canvas id="c9" width="300" height="300"></canvas>
<script>
  /* 后者覆盖前者 */
  // 全部绘制
  draw(1, "source-over");
  // 重叠地方绘制
  draw(2, "source-in");
  // 重叠地方不绘制
  draw(3, "source-out");
  // 在当前画布上，重叠地方绘制
  draw(4, "source-atop");
  /* 前者覆盖后者 */
  // 全部绘制
  draw(5, "destination-over");
  // 重叠地方绘制
  draw(6, "destination-in");
  // 重叠地方不绘制
  draw(7, "destination-out");
  // 在当前画布上，重叠地方绘制
  draw(8, "destination-atop");

  function draw(id, type) {
    // 第一个
    let ctx = document.getElementById("c" + id + "1").getContext('2d');
    ctx.translate(50, 50);
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.beginPath();
    ctx.arc(0, -20, 20, 0, 2 * Math.PI);
    ctx.fill();
    // 第二个
    ctx = document.getElementById("c" + id + "2").getContext('2d');
    ctx.translate(50, 50);
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.beginPath();
    ctx.arc(0, -20, 20, 0, 2 * Math.PI);
    ctx.fill();
    // 组合样式
    ctx.globalCompositeOperation = type;
    ctx.fillStyle = "rgb(0,255,0)";
    ctx.beginPath();
    ctx.arc(15, 5, 20, 0, 2 * Math.PI);
    ctx.fill();
    // 第三个
    ctx = document.getElementById("c" + id + "3").getContext('2d');
    ctx.translate(50, 50);
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.beginPath();
    ctx.arc(0, -20, 20, 0, 2 * Math.PI);
    ctx.fill();
    ctx.globalCompositeOperation = type;
    ctx.fillStyle = "rgb(0,255,0)";
    ctx.beginPath();
    ctx.arc(15, 5, 20, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillStyle = "rgb(0,0,255)";
    ctx.beginPath();
    ctx.arc(-15, 5, 20, 0, 2 * Math.PI);
    ctx.fill();
  }

  const ctx = document.getElementById("c9").getContext('2d');
  ctx.fillStyle = "#66ccff";
  ctx.fillRect(0, 0, 300, 300);
  ctx.translate(150, 150);
  ctx.beginPath();
  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
  // 创建裁剪路径
  ctx.clip();
  ctx.fillStyle = "green";
  ctx.fillRect(-75, -75, 150, 150);
</script>
</body>
</html>
